<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 15px">
    <el-tab-pane label="设备详情" name="first">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>device-name</span>
          <el-tag type="success" id="online" v-if="deviceDetails.online===true">在线</el-tag>
          <el-tag type="danger" id="online" v-if="deviceDetails.online===false">离线</el-tag>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <el-tag style="margin-right: 129px;">设备 ID</el-tag>
          {{ deviceDetails.id }}
          <el-link style="margin-left: 30px;" type="primary" @click="copy">复制</el-link>
        </div>
        <div class="text item">
          <el-tag style="margin-right: 120px;">创建时间</el-tag>
          {{ deviceDetails.create_time }}
          <el-link style="margin-left: 30px;" type="primary" @click="copy">复制</el-link>
        </div>
        <div class="text item">
          <el-tag style="margin-right: 121px;">设备 key</el-tag>
          {{ deviceDetails.key }}
          <el-link style="margin-left: 30px;" type="primary" @click="copy">复制</el-link>
          <el-button type="text" @click="dialogFormVisible = true">
            <el-link style="margin-left: 30px;" type="primary">更换Key</el-link>
          </el-button>
          <!-- 上面点击更换key后弹出的对话框 -->
          <el-dialog title="更换Key" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="新key:" :label-width="formLabelWidth">
                <el-input v-model="randomKey" style="width:75%;margin-right: 15px; " autocomplete="off"></el-input>
                <el-button @click="getBase64Key()" type="primary" plain>随机生成Key</el-button>
              </el-form-item>
              <el-form-item style="margin-left: 60px; " label="强制设备离线:" prop="resource">
                <el-radio-group v-model="form.isForce">
                  <el-radio label="true">是</el-radio>
                  <el-radio label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateDeviceKey();dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <div class="text item">
          <el-tag style="margin-right: 120px;">设备描述</el-tag>
          {{ deviceDetails.desc }}
        </div>
      </el-card>
    </el-tab-pane>

    <el-tab-pane label="数据流展示" name="second">
      <el-card
        class="box-card-show"
        v-for="item in this.deviceDetails.datastreams"
        :key="item"
        style="margin-top: 12px;
        margin-left: 30px;
        float: left;"
      >

        <div slot="header" class="clearfix-show">
          <span><el-tag>{{ item.id }}</el-tag></span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <span>当前数值：{{ item.value }}</span><br/><br/><br/>
          <span>最后更新时间：{{ item.at }}</span>
        </div>
      </el-card>
    </el-tab-pane>

    <el-tab-pane label="在线记录" name="third">
      角色管理
    </el-tab-pane>

    <el-tab-pane label="设备镜像" name="fourth">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>设备镜像</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="json-editor" @model="ddd" style="margin-right: 12px;">
          <textarea ref="textarea"/>
        </div>
      </el-card>

    </el-tab-pane>

  </el-tabs>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/3024-day.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/json-lint'
// 折叠代码
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import axios from 'axios'

export default {
  name: 'JsonEditor',
  props: ['value'],
  data() {
    return {
      ddd: '',
      jsonEditor: false,
      dialogFormVisible: false,
      form: {
        isForce: 'true', // 是否强制设备离线
        name: '',
        date1: '',
        date2: '',
        value: '',
        deviceImage: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      randomKey: '', // 随机获取设备Key
      formLabelWidth: '120px',
      deviceDetails: '',
      deviceValue: '',
      paramsId: '', // 设备ID号
      tableData: [{
        key: '设备ID',
        value: '1231234237'
      }],
      activeName: 'first'
    }
  },
  watch: {
    value(value) {
      const editor_value = this.jsonEditor.getValue()
      if (value !== editor_value) {
        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
      }
    }
  },
  mounted() {
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      lineNumbers: true,
      mode: 'application/json',
      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
      theme: 'panda-syntax',
      lint: true,
      foldGutter: {
        rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent, CodeMirror.fold.comment)
      }
    })

    this.jsonEditor.setValue(JSON.stringify(this.deviceImage, null, 2))
    this.jsonEditor.on('change', cm => {
      this.$emit('changed', cm.getValue())
      this.$emit('input', cm.getValue())
    })
  },
  methods: {
    getValue() {
      return this.jsonEditor.getValue()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    copy() {
      this.$message({
        showClose: true,
        message: '恭喜你，复制成功',
        type: 'success'
      })
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 点击获取随机key按钮，获取随机base64Key
    getBase64Key() {
      // 发送ajax请求获取随机key值
      axios({
        method: 'get',
        url: 'http://localhost:8080/device/getBase64Key'
      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        this.randomKey = res.data.key
        console.log(this.deviceDetails.datastreams.length)
        console.log(this.deviceDetails.datastreams)
      }).catch(() => { // 这里是请求失败执行的内容

      })
    },
    // 更新设备Key
    updateDeviceKey() {
      // 重新加载页面
      location.reload()
      axios({
        method: 'get',
        url: 'http://localhost:8080/device/' + this.deviceDetails.id + '/' + this.randomKey + '/' + this.form.isForce
      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        // this.randomKey=res.data.key
        console.log(res.data)
      }).catch(() => { // 这里是请求失败执行的内容

      })
    },
    getUrlParam() {
      this.Id = this.$route.query.Id
      // 获取请求路径中的参数
      if (this.$route.params && this.$route.params.id) {
        // 发送ajax请求获取设备详情信息
        this.paramsId = this.$route.params.id
      }
    },
    getDeviceDetailsById(deviceId) {
      axios({
        method: 'get',
        url: 'http://localhost:8080/device/details/' + deviceId
      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        this.deviceDetails = res.data.data
        console.log(res.data)
      }).catch(() => { // 这里是请求失败执行的内容

      })
    },
    getDeviceDate(deviceId) {
      axios({
        method: 'get',
        url: 'http://localhost:8080/device/data/' + deviceId
      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        this.deviceValue = res.data
        console.log(res.data)
      }).catch(() => { // 这里是请求失败执行的内容

      })
    },
    getDeviceImage(deviceId) {
      axios({
        method: 'get', // get请求
        url: 'http://localhost:8080/device/' + deviceId.id + '/image'
      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        console.log(res)
        this.deviceImage = res.data.data
        this.jsonEditor.setValue(JSON.stringify(this.deviceImage, null, 2))
      }).catch(() => { // 这里是请求失败执行的内容

      })
    }
  },
  created() {
    this.getUrlParam()
    this.getDeviceDetailsById(this.paramsId)
    this.getDeviceDate(this.paramsId)
    this.getDeviceImage(this.$route.params)
  }
}
</script>

<style scoped>
.json-editor {
  height: 100%;
  position: relative;
}

.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 180px;
}

.json-editor >>> .CodeMirror-scroll {
  min-height: 180px;
}

.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #f08047;
}

#online {
  margin-left: 20px;
}

.line {
  text-align: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.clearfix-show:before,
.clearfix-show:after {
  display: table;
  content: "";
}

.clearfix-show:after {
  clear: both
}

.box-card-show {
  width: 480px;
}

.box-card {
  margin-left: 8px;
  width: 95%;
}
</style>
